<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 100000px;
            width: 550px;
            text-align: center;
        }
        
        .one {
            color: dimgrey;
            background-color: gold;
        }
        
        .two {
            color: cadetblue;
            background-color: rgb(248, 188, 98);
        }
    </style>
</head>

<body>
    <div id="first" class="one">
        北京
    </div>
    <div id="second" class="two">
        <h2>沉醉过 泥土的芬芳啊</h2>

        <div id="third" class="two">
            <h2>用最柔嫩青苔 换取一抹阳光</h2>
        </div>

        <div id="forth" class="two">
            <p id="p1">
                <h2 id="h11">可我仍爱着那道晚霞</h2>
            </p>
        </div>
    </div>

    <ul style="background-color: pink;">
        <li id="cm">草莓</li>
        <li>蓝莓</li>
        <li>树莓</li>
    </ul>
    <script>
        let first = document.getElementById("first")
        console.log(first)
        first.innerHTML = "<h1><span>《</span>Welcome<span>》</span></h1>"

        let myEle = document.createElement("h2")
        myEle.innerHTML = "生 予绚烂<br>"
        first.appendChild(myEle) //页面插入元素，是在原有的标签上插入而不能在全新的标签插入

        let myEle1 = document.createElement("h2")
        myEle1.innerHTML = "生 予希望"
        let myEle2 = document.createElement("h2")
        myEle2.innerHTML = "生 予一切无常"
        first.append(myEle1, myEle2)
        first.append("<h2>======================================</h2>") //无法渲染元素
        first.prepend("-------------------------------------------")

        let second = document.querySelector("#second") //selecttor只获取第一个
        console.log(second)
        let third = document.querySelector(".two")
        console.log(third)

        let divs = document.getElementsByTagName("div")
        console.log(divs)
        divs[3].append("======================================")

        //插入元素
        let p1 = document.getElementById("p1")
        let h11 = document.getElementById("h11")
        let myEle3 = document.createElement("h3")
        let myEle4 = document.createElement("h3")
        myEle3.innerHTML = "^-^   ^.^   ^-^   ^.^   ^-^   ^.^"
        myEle4.innerHTML = "   ^.^   ^-^   ^.^   ^-^   ^.^   "
            // divs[3].insertBefore(myEle3, p1)

        p1.before(myEle3)
        h11.after(myEle4)
        let span1 = document.getElementById("p1")
        span1.remove() //简便删除

        //复杂删除
        let list = document.getElementsByTagName("ul")
        console.log(list)
        console.log(list[0].children)
        for (item of list[0].children) {
            item.innerHTML = "杨桃"
            break
        }


        console.log(list[0].firstChild) //可能会查找到换行符所在的文本节点
        console.log(list[0].firstElementChild) //查找第一个元素
        console.log(list[0].firstElementChild.nextSibling) //可能会查找到后续换行符
        console.log(list[0].firstElementChild.nextElementSibling) //查找第一个元素的下一个元素
        console.log(list[0].children[2]) //获取指定位置的元素

        // let cm = document.getElementById("cm")
        // cm.remove()

        // let parent = document.getElementById("cm").parentElement
        // parent.removeChild(cm)

        // let parent = list[0].children[0].parentElement
        // parent.removeChild(cm)
    </script>
</body>

</html>